<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <title>Document</title>
</head>
<body>
<div id="chatRoom">
    <div id="chatMain">
        <div id="roomTop">
            <span id="topTittle">青青草原聊天室</span>
            <div id="curUsrInfo">
                <span id="curUsrName"></span>
                <img id="curUsrImg" alt="" src="./image/defaultImg.png">
            </div>
        </div>
        <div id="roomDown">
            <div id="left">
                <div id="leftInner"></div>
            </div>
            <div id="right">
                <div id="content"></div>
                <div id="iptAndBtn">
                    <input type="text" id="ipt" placeholder="请输入">
                    <button id="btn">发送</button>
                </div>
            </div>
        </div>
    </div>

</div>

<style>
    body{
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    #chatRoom{
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(45deg,#845EC2,#A178DF,#BE93FD,#DCB0FF,#FACCFF);
        position: relative;
    }
    #chatMain{
        width: 90%;
        height: 90vh;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 30px;
    }
    #roomTop{
        width: 100%;
        height: 80px;
        background-image: linear-gradient(45deg,#845EC2,#D65DB1,#FF6F91,#FF9671,#FFC75F,#F9F871);
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: white;
        line-height: 80px;
        border-radius: 30px;
        position: relative;
    }
    #roomTop #topTittle{
        position: absolute;
        left: 560px;
    }
    #curUsrInfo>span{
        font-size: 20px;
        color: dimgray;
        position: absolute;
        right: 120px;
        top: 5px;
    }
    #curUsrInfo>img{
        width: 70px;
        height: 70px;
        border: 1px solid black;
        position: absolute;
        right: 30px;
        top: 5px;
        border-radius: 20px;
    }
    #roomDown{
        width: 100%;
        height: calc(90vh - 68px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        border-radius: 30px;
        margin-top: 12px;
    }
    #left{
        width: 20%;
        border: 1px solid #FF9671;
        border-radius: 30px;
        padding: 24px;
        box-sizing: border-box;
    }
    #left #leftInner{
        width: auto;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow-y: scroll;
    }
    #left .imgItem{
        width: 100px;
        height: 110px;
        border-radius: 20px;
        position: relative;
        display: inline-block;
    }
    #left .imgItem img{
        width: 80px;
        height: 80px;
        border-radius: 20px;
        position: absolute;
        left: 10px;
        right: 10px;
        text-align: center;
        top: 0;
    }
    #left .imgItem p{
        width: 80px;
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        margin: 0;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #FFC75F;
    }
    #right{
        width: 80%;
        border: 1px solid #FF9671;
        border-radius: 30px;
    }
    #content{
        width: 100%;
        height: 500px;
        /*border-bottom: 1px solid #333;*/
        overflow-y: scroll;
        padding: 24px;
        box-sizing: border-box;
        overflow-x:hidden;
    }
    #content>p{
        width: 300px;
        height: 40px;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        margin: 0 auto;
        color: rgba(0,0,0,.3);
    }
    #content .msgBox{
        width: 960px;
        height: auto;
        min-height: 100px;
        /*border: 2px solid #845EC2;*/
        border-radius: 20px;
        display: flex;
        justify-content: start;
    }
    #content>.msgBox>.leftInfo img{
        width: 80px;
        height: 80px;
        position: absolute;
        top: 8px;
        left: 5px;
        border-radius: 15px;
    }
    #content>.msgBox>.leftInfo span{
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        left: 90px;
        top: 0;
    }
    #content .msgBox>.leftInfo{
        display: inline-block;
        position: relative;
        width: 160px;
        height: auto;
        /*border: 1px solid black;*/
        box-sizing: border-box;
    }
    #content .msgBox>.rightMsg{
        width: 660px;
        height: auto;
        padding: 40px 15px 15px 0;
        box-sizing: border-box;
    }
    #content .msgBox>.rightMsg>.msgContent{
        min-width: 80px;
        max-width: 750px;
        width: max-content;
        height: auto;
        min-height: 40px;
        border-radius: 8px;
        background-color: #FF9671;
        padding: 8px;
    }
    #content .msgBox>.leftInfo:after{
        position: absolute;
        right: 0;
        top: 50px;
        content: '';
        width: 0;
        height: 0;
        border: 20px solid;
        border-top: 10px solid;
        border-bottom: 10px solid;
        border-color: transparent #FF9671 transparent transparent;

    }
    /*我的消息样式*/
    #content .iMsgBox{
        width: 960px;
        height: auto;
        min-height: 100px;
        border-radius: 20px;
        display: flex;
        justify-content: end;
        position: relative;
        left: 108px;
    }
    #content .iMsgBox>.leftMsg{
        width: 660px;
        height: auto;
        padding: 40px 15px 15px 0;
        box-sizing: border-box;
        position: relative;
    }
    #content .iMsgBox .leftMsg>.msgContent{
        min-width: 80px;
        max-width: 750px;
        width: max-content;
        height: auto;
        min-height: 40px;
        border-radius: 8px;
        background-color: #FF9671;
        padding: 8px;
        position: absolute;
        right: 10px;
    }
    #content .iMsgBox .rightInfo{
        display: inline-block;
        position: relative;
        width: 160px;
        height: auto;
        box-sizing: border-box;
    }
    #content .iMsgBox .rightInfo img{
        width: 80px;
        height: 80px;
        position: absolute;
        top: 8px;
        right: 16px;
        border-radius: 15px;
    }
    #content .iMsgBox .rightInfo span{
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
    }
    #content .iMsgBox>.rightInfo:before{
        position: absolute;
        left: -10px;
        top: 50px;
        content: '';
        width: 0;
        height: 0;
        border: 20px solid;
        border-top: 10px solid;
        border-bottom: 10px solid;
        border-color: transparent  transparent transparent #FF9671;
    }
    /*对滚动条美化处理一下，去除滚动条外部*/
    ::-webkit-scrollbar-track{
        display: none;
    }
    /*滚动条高度*/
    ::-webkit-scrollbar{
        height:14px;
    }
    /*滚动条可以拖动部分的样式*/
    ::-webkit-scrollbar-thumb{
        border-radius: 4px;
        background-color: rgba(0,0,0,.1)
    }
    #iptAndBtn{
        width: 100%;
        height: calc(100% - 500px);
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(0,0,0,.1);
        border-radius: 30px;
    }
    #ipt{
        width: 90%;
        height: 48px;
        border-radius: 30px;
        padding-left: 20px;
        box-sizing: border-box;
        outline: none;
        border: none;
    }
    #btn{
        width: 80px;
        height: 48px;
        border-radius: 30px;
    }
</style>
<script>
    let ipt=document.querySelector('#ipt')
    let btn=document.querySelector('#btn')
    let content=document.querySelector('#content')
    let curUsrName=document.querySelector('#curUsrName')
    let curUsrImg=document.querySelector('#curUsrImg')
    let leftList=document.querySelector('#leftInner')
    let ws=new WebSocket('ws://localhost:8081')
    ws.addEventListener('open',function () {
    })
    let roomUsrsArr=[]
    function handerLeft(params) {
        let roomUsrs=JSON.parse(localStorage.getItem('usrInfo'))
        // 如果有人离开就使用另外的数据
        let roomUsrsData=(params && params.isDel)?params.newData:roomUsrs[roomUsrs.length-1]
        leftList.innerHTML=''//清空之前的列表，因为会叠加创建子元素
        roomUsrsData.forEach(item=>{
            let leftListHtml=`
                <div class="imgItem">
                    <img src="${item.img}" alt="">
                    <p>${item.name}</p>
                </div>`
                leftList.insertAdjacentHTML('beforeend',leftListHtml)
        })
    }
    ws.addEventListener('message',function (dataObj) {
        let parseData=JSON.parse(dataObj.data)
        console.log('parseData',parseData)
        if(parseData.enterOrMsg==='enter'){
            roomUsrsArr.push(parseData.curAllUsrs)
            localStorage.setItem('usrInfo',JSON.stringify(roomUsrsArr))
            if(curUsrName.innerText.length===0){
                curUsrName.innerText=parseData.usr
            }
            if(curUsrImg.src.slice(-14)==='defaultImg.png'){
                curUsrImg.src=parseData.img
            }
            let enterBox=document.createElement('p')
            handerLeft()
            content.appendChild(enterBox)
            enterBox.innerText=parseData.msg
        }
        if(parseData.enterOrMsg==='msg'){
            if(curUsrName.innerText!==parseData.usr){
                // 别人对话
                let otherMsgBox=`
            <div class="msgBox">
                <div class="leftInfo">
                    <img class="usrImg" alt="" src="${parseData.img}">
                    <span class="usrName">${parseData.usr}</span>
                </div>
                <div class="rightMsg">
                    <div class="msgContent">${parseData.msg}</div>
                </div>
            </div>`
                content.insertAdjacentHTML('beforeend',otherMsgBox)
            }else {
            //     自己对话
                let iMsgBox=`
            <div class="iMsgBox">
                <div class="leftMsg">
                    <div class="msgContent">${parseData.msg}</div>
                </div>
                <div class="rightInfo">
                    <span class="usrName">${parseData.usr}</span>
                    <img class="usrImg" alt="" src="${parseData.img}">
                </div>
            </div>`
                content.insertAdjacentHTML('beforeend',iMsgBox)
            }

        }
        if(parseData.enterOrMsg==='leave'){
            console.log('parseData',parseData)
            let enterBox=document.createElement('p')
            content.appendChild(enterBox)
            enterBox.innerText=parseData.msg
            handerLeft({isDel:true,newData:parseData.curAllUsrs})
        }
    })
    btn.addEventListener('click',function () {
        ws.send(JSON.stringify({msg:ipt.value,enterOrMsg:'msg'}))
        ipt.value=''
    })
</script>
</body>
</html>